@using viBook.Common
@using viBook.Helpers
@using viBook.Models
@model Chapter
@{
    ViewBag.Title = Model.Book.Title;
    ViewBag.CurrentPage = ControllerEnum.Chapters;
    var isChapterOwner = (bool)ViewBag.IsOwner;
}
@section HeadContent{
    <script src="../../Scripts/jquery.fittext.js" type="text/javascript"></script>
    <link href="../../Content/Tag.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Custom.css" rel="stylesheet" type="text/css" />
}
<div class="profile-actions profile-actions-shots">
    <ul class="profile-tabs group">
        <li>@Model.NumberOfViews<span class="meta">views</span> </li>
        <li><span data-bind="text: numberOfLikes"></span><span class="meta">likes</span></li>
        <li><span data-bind="text: numberOfComments"></span><span class="meta">responses</span></li>
    </ul>
</div>
<div class="full">
    <div id="screenshot-title-section" class="full title">
        <div class="single-title vcard group">
            <a href="#" class="url">
                <img alt="@Model.Book.Title" class="photo fn" src="@Model.Book.CoverUrl" />
            </a>
            <h1>@Html.ActionLink(Model.Book.Title, "Details", "Books", new { id = Model.BookId }, null)
                <span class="sep">|</span>
                @Model.ChapterName</h1>
            <div class="shot-byline">
                <span class="shot-byline-user">written by <a class = "url" href= '@Url.Action("Details", "Authors", new { id = Model.Book.AuthorId })'>@Model.Book.AuthorName</a></span>
                <br />
                <span class="shot-byline-user">uploaded by <a class = "url" href= '@Url.Action("Details", "Account", new { id = Model.Book.UploadedBy })'>@Model.Book.Uploader.DisplayName</a></span>
                <span class="shot-byline-user"><span class="sep">|</span> @Model.UploadedDate.ConvertDateToString()
                </span>
                @if (isChapterOwner)
                {
                    <br />
                    @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) 
                    <span>| </span> 
                    <a href="#" type="button" id="btnDelete" data-bind="click: deleteChapter">Delete</a>
                }
            </div>
        </div>
    </div>
</div>
<div id="chapter-main">
    <div id="picture-section" style="text-align: center" data-bind="template:{name:'ChapterTemplate',foreach: pictureCollection, afterRender: onRenderImageCompleted}">
    </div>
    <br />
    <div class="col-about" style="width: 582px">
        @if (@Model.PreviousChapterId != 0)
        {
            <p class="note">
                <a href="@Url.Action("Details", "Chapters", new { id = @Model.PreviousChapterId })">
                    Previous chapter<span>@Model.PreviousChapterName</span></a>
            </p>    
        }
        @if (@Model.NextChapterId != 0)
        {
            <p class="note">
                <a href="@Url.Action("Details", "Chapters", new { id = @Model.NextChapterId })">Next
                    chapter<span> @Model.NextChapterName</span></a>
            </p>
        }
    </div>
</div>
<div id="sidebar-holder">
    <div id="chapter-screenshot-meta" class="meta-act">
        <div class="group fav" data-bind="css: { 'marked': isLiked}">
            <strong class="fav-number"><a href="#"><span data-bind="text: numberOfLikes()+' likes'" />
            </a></strong><a href="#" class="meta-act-link meta-like fav-toggle" data-bind="click: likeChapter"
                title="Like this book"><span data-bind="visible: isLiked">You like</span> <span data-bind="visible: isLiked()==false">
                    Like?</span> </a>
        </div>
        <div class="meta-act">
            <div class="share">
            </div>
        </div>
        <div class="meta-act">
            <div class="meta-act-link meta-share">
                <p>
                    Display mode:
                    <select data-bind="options: availableTagModes,optionsText:function(item){ return item.desc;},value: selectedTagMode">
                    </select>
                </p>
            </div>
        </div>
        <br />
        <div id="comment-section" data-bind="template: {name:'CommentTemplate'}">
        </div>
    </div>
</div>
@Html.Partial("_ChapterTemplate")
@Html.Partial("_CommentTemplate")
@Html.Partial("DetailsJS")
